import { useState } from "react"
// import { Conversations } from "@ant-design/x"

const Sider = ({ onTitleChange }) => {
  const [activeKey, setActiveKey] = useState("advice")

  const [list] = useState([
    {
      key: "advice",
      label: "智能辅助决策"
    },
    {
      key: "report",
      label: "风险评估报告"
    },
    {
      key: "search",
      label: "整改进度查询"
    }
  ])

  const handleClickItem = (item) => {
    onTitleChange(item.label)
    setActiveKey(item.key)
  }

  return (
    <div className="flex flex-col w-[320px] h-screen shadow-[0_10px_2px_rgba(0,0,0,0.25)]">
      <header className="bg-[#0357b9] p-6 text-xl text-white">
        智能辅助决策
      </header>
      <div className="bg-[#0e71ce] m-4 rounded-xl py-3 text-center text-white cursor-pointer">
        + 新建对话
      </div>
      <ul className="flex-1 p-1">
        {list.map((item) => (
          <li
            className={`px-4 hover:bg-[#f5f5f5] cursor-pointer  my-1 py-4 rounded-xl ${
              activeKey === item.key ? "bg-[#f0f0f0]" : ""
            }`}
            key={item.key}
            onClick={() => handleClickItem(item)}
          >
            {item.label}
          </li>
        ))}
      </ul>
      {/* <Conversations items={list} className='flex-1'/> */}
    </div>
  )
}

export default Sider
